/* eslint-disable no-tabs */

const path = require("path")
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const HappyPack = require("happypack")
const webpack = require("webpack")
const { CheckerPlugin } = require("awesome-typescript-loader")
const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin")

module.exports = function(env) {
  let { mode } = env
  let externals = {
    "babel-polyfill": "babel-polyfill"
  }

  const resolve = {
    extensions: [
      ".web.tsx",
      ".tsx",
      ".web.ts",
      ".ts",
      ".story.tsx",
      ".test.ts",
      ".js",
      ".jsx",
      ".less",
      ".css",
      ".json"
    ],
    alias: {
      "react-native$": "react-native-web",
      "@ant-design/react-native$": "antd-mobile"
    },
    modules: ["web_modules", "node_modules"],
    plugins: [
      new TsconfigPathsPlugin({
        configFile: path.join(__dirname, "../../../", "tsconfig.json")
      })
    ]
  }

  const rules = [
    {
      test: /\.ts[x]?$/,
      exclude: /node_modules/,
      use: {
        loader: "awesome-typescript-loader"
      }
    },
    {
      test: /\.js[x]?$/,
      exclude: /node_modules/,
      loader: "happypack/loader?id=babel"
    },
    { enforce: "pre", test: /\.ts[x]$/, loader: "source-map-loader" },
    {
      test: /\.css?$/,
      use: ExtractTextPlugin.extract({
        use: ["happypack/loader?id=css"],
        fallback: "style-loader"
      })
    },
    {
      test: /\.less?$/,
      use: ExtractTextPlugin.extract({
        use: ["happypack/loader?id=less"],
        fallback: "style-loader"
      })
    },
    {
      test: /\.(gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,
      exclude: /favicon\.*$/,
      use: [
        {
          loader: "url-loader",
          options: {
            limit: 8192,
            name: "../../app/assets/[name].[ext]",
            publicPath: "./"
          }
        }
      ]
    },
    {
      test: /\.(png|jpe?g|gif)$/,
      loader: "react-native-web-image-loader?name=[name].[ext]&scalings[@2x]=2&scalings[@3x]=3"
    },
    {
      test: /\.(otf|swf|mp3|mp4|flv|wav)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      use: "file-loader",
      exclude: path.resolve(__dirname, "/app/asset/svg")
    },
    {
      test: /\.svg$/,
      include: path.resolve(__dirname, "/app/asset/svg/colorful"),
      use: [
        {
          loader: "svg-sprite-loader",
          options: {
            symbolId: "icon-[name]"
          }
        }
      ]
    }
  ]

  const plugins = [
    new webpack.DefinePlugin({
      NODE_ENV: JSON.stringify(mode)
    }),
    new ExtractTextPlugin({
      filename: "[name].css"
    }),
    new HappyPack({
      // 用唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文件
      id: "babel",
      // 如何处理 .js 文件，用法和 Loader 配置中一样
      loaders: ["babel-loader?cacheDirectory"]
      // ... 其它配置项
    }),
    new HappyPack({
      id: "css",
      // 如何处理 .css 文件，用法和 Loader 配置中一样
      loaders: ["css-loader", "postcss-loader"]
    }),
    new HappyPack({
      id: "less",
      // 如何处理 .css 文件，用法和 Loader 配置中一样
      loaders: ["css-loader", "postcss-loader", "less-loader"]
    }),
    new CheckerPlugin()
  ]

  return {
    externals,
    resolve,
    module: {
      rules
    },
    plugins
  }
}
